<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D 标签云</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .tagcloud {
            position: relative;
            width: 500px;
            height: 500px;
        }
        .tagcloud a {
            position: absolute;
            display: block;
            padding: 10px 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .tagcloud a:hover {
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="tagcloud">
        <!-- <a href="#">标签1</a>
        <a href="#">标签2</a>
        <a href="#">标签3</a>
        <a href="#">标签4</a>
        <a href="#">标签5</a>
        <a href="#">标签6</a>
        <a href="#">标签7</a>
        <a href="#">标签8</a>
        <a href="#">标签9</a> -->
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/tagcloud@2.0.1/dist/tagcloud.min.js"></script> -->
     <script src="./TagCloud.min.js"></script>
    <script>
        TagCloud('.tagcloud', [
            '标签1', '标签2', '标签3', '标签4', '标签5', 
            '标签6', '标签7', '标签8', '标签9', '标签10', 
            '标签11', '标签12', '标签13', '标签14', '标签15'
        ], {
            radius: 150,
            maxSpeed: 'normal',
            initSpeed: 'normal',
            direction: 135,
            keep: true
        });
    </script>
</body>
</html>